<template>
  <div class="modal-wrapper" v-loading="loading">
    <el-form ref="form" :label-width="labelWidth" :model="form" :rules="rules">
      <el-form-item label="标签名" prop="label">
        <el-input v-model="form.label" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-tag
          class="tag"
          v-for="(item, index) in hasTagList"
          :key="index"
          @click="chooseTag(item)">
          {{item.classifyName}}
        </el-tag>
      </el-form-item>
    </el-form>
    <div class="dialog-footer-account">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :disabled="submitLoading" @click="save">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { detailMixins } from '../../mixins.js';

export default {
  mixins: [detailMixins],
  props: {
    labelInfo: {
      type: Object,
      default: function () { return {}; }
    },
    imageInfo: {
      type: Object,
      default: function () { return {}; }
    }
  },
  data () {
    return {
      timer: '',
      submitLoading: false,
      loading: false,
      labelWidth: '100px',
      form: {
        label: ''
      },
      rules: {
        label: { required: true, message: '请输入标签名', trigger: 'blur' },
      },
      hasTagList: [],
    };
  },
  methods: {
    async save1 () {
      if (!this.$common.doSubmit('form', this)) return;
      const targetTag = this.hasTagList.find(tag => tag.classifyName === this.form.label);
      const result = {
        ...this.form,
        ...this.labelInfo
      };
      // 如果有标签是之前使用过的，加上classifyId
      if (targetTag) {
        result.classifyId = targetTag.id;
      }

      this.$emit('submit', result);
      this.$emit('close');
    },
    debounce (fn,delay) {
      var _this = this;
      return function(...args){
        if(_this.timer){
          clearTimeout(_this.timer)
        }
        _this.timer = setTimeout(()=>{
          fn.apply(_this,args)
        }, delay)
      };
    },
    async save () {
      this.debounce(async () => {
        if (!this.$common.doSubmit('form', this)) return;
        this.submitLoading = true;
        const targetTag = this.hasTagList.find(tag => tag.classifyName === this.form.label);
        let { ratio, startX, startY, endX, endY } = this.labelInfo;
        startX = (startX / ratio).toFixed(2);
        startY = (startY / ratio).toFixed(2);
        endX = (endX / ratio).toFixed(2);
        endY = (endY / ratio).toFixed(2);
        const points = `(${startX},${startY})|(${endX},${endY})`;

        const params = {
          calibrationDetailId: this.id,
          calibrationId: this.calibrationId,
          classifyName: this.form.label,
          picId: this.imageInfo.id,
          points
        };
        // 如果有标签是之前使用过的，加上classifyId
        if (targetTag) {
          params.classifyId = targetTag.id;
        }
        try {
          const res = await this.$store.dispatch('tagAdminCalibrationIdSaveImgDetectLabels', params);
          const result = res.data || '';
          if (result.success) {
            this.$message({ type: 'success', message: '新增标签成功' });
            this.$emit('submit', result);
            this.$emit('close');
          } else {
            this.$message({ type: 'error', message: '新增标签失败' });
          }
        } catch (e) {
          console.error(e);
        }
        this.submitLoading = false;  
      }, 500)();
      
    },
    show () {
      this.$refs.form.resetFields();
       // 获取单个任务下的标签列表
      this.getTag();
    },
    async getTag () {
      const params = {
        calibrationDetailsId: this.id,
      };
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationLoadImgDetectCalibrationAllLabels', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data && result.data.length ? result.data : [];
          this.hasTagList = data;
        } else {
          this.hasTagList = [];
        }
      } catch (e) {
        console.error(e);
      }
    },
    chooseTag (val) {
      this.form.label = val.classifyName;
    },
    cancel () {
      this.$emit('close');
    }
  }
}
</script>
<style lang="less" scoped>
.tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
